<template>
  <div id="transResult">
    <Splitpanes horizontal>
      <Pane :size="50">
        <vxe-toolbar perfect>
          <template #buttons>
            <vxe-input v-model="form.searchValue" type="search" clearable class="vxeInputSearch" placeholder="关键字查询"  @clear="findUserManage" @search-click="findUserManage"></vxe-input>
            <vxe-button type="text" class="button-blue" icon="vxe-icon-refresh" content="刷新" :loading="iloading" :disabled="isShow" @click="findUserManage"></vxe-button>
            <vxe-button type="text" class="button-blue" icon="vxe-icon-square-plus" content="新增" :disabled="isShow" @click="handleAdd"></vxe-button>
            <vxe-button type="text" class="button-blue" icon="vxe-icon-save" content="保存" :disabled="isShow" @click="handleSave"></vxe-button>
            <vxe-button type="text" icon="vxe-icon-delete" class="button-red" content="删除" :disabled="isShow" @click="handleDelete"></vxe-button>
          </template>
        </vxe-toolbar>
        <div class="tableBox">
          <vxe-table show-overflow keep-source ref="transResultRef" height="auto" :header-cell-style="{ height: '28px', padding: '0px 2px' }" :column-config="{ resizable: true }" :loading="loading" :data="userManageList" :edit-config="{ trigger: 'click', mode: 'cell', showStatus: true, showIcon: false }">
            <vxe-column type="checkbox" width="30" fixed="left" align="left"></vxe-column>
            <vxe-column field="seq" title="序号" width="30" type="seq" align="center"></vxe-column>
            <vxe-column field="userCode" title="员工编号" width="200">
              <template #default="{ row }">
                <span>{{ row.userCode }}</span>
              </template>
            </vxe-column>
            <vxe-column title="员工" field="userName" align="left" :edit-render="{ autofocus: '.vxe-input--inner' }">
              <template #edit="{ row, rowIndex }">
                <VxePulldownSelectionWithNa
                    style="width: 100%"
                    :isChild="true"
                    :childIndex="rowIndex"
                    :url="'/api/sys/hisEmployee/finAllHisEmployeeList'"
                    @confirmClick="SelectRowClick"
                    :tableColumn="[
                { type: 'seq', title: '#', width: '30px' },
                { field: 'name', title: '姓名' },
                { field: 'code', title: '编码' }
              ]"
                    :aimKeys="[
                { aimKey: 'userName', rowKey: 'name' },
                { aimKey: 'userCode', rowKey: 'code' }
              ]"
                    :displayTexts="['userName']"
                    :displayTextObj="row.userName ? row.userName : ''"
                />
              </template>
            </vxe-column>
          </vxe-table>
        </div>
      </Pane>
    </Splitpanes>
  </div>
</template>
<script lang="ts" setup>
// 引入组件区 ==========
import { reactive, ref, getCurrentInstance, onMounted, watch, inject } from 'vue';
import { VxeMessage, VxeNotifyType } from '@/utils/CommonMessage';
import { Splitpanes, Pane } from 'splitpanes';
import type { VxeTableInstance } from 'vxe-table';
import VxePulldownSelectionWithNa from '@/components/VxePulldownSelectionWithNa.vue';
import { IsEmpty } from '@/utils/common';


// 全局变量定义区 ==========
// 获取屏幕高度
let conHeight = ref(document.documentElement.clientHeight);
let useSize = localStorage.getItem('uiSize');
let loading = ref(false); //模版加载

let { proxy }: any = getCurrentInstance();
let userManageList: any = reactive([]); //模版表格数据

let invStoreManage: any = null;
let isShow: any = ref(false);
let iloading = ref(false);
const transResultRef = ref<VxeTableInstance<RowVO>>(); //表格ref标记
let form = reactive({
  searchValue: ''
})


// 方法定义区 =============
defineExpose({ initPage,clearData });

function clearData() {
  userManageList.length = 0;
}


function initPage(row: any) {
  if (IsEmpty(row)){
    isShow.value=true;
    return;
  }
  isShow.value=false;
  invStoreManage = row;
  findUserManage();
}


/**下拉选中行事件 */
function SelectRowClick(e) {
  e.aimKeys.forEach((r) => {
    userManageList[e.childIndex][r.aimKey] = e.row[r.rowKey];
  });
}


function findUserManage() {
  loading.value = true;
  userManageList.length = 0;
  const url = '/inv/userManage/findUserManageList';
  proxy.$http
    .get(url, { params: { storeId: invStoreManage.id ,searchValue:form.searchValue } })
    .then((res: any) => {
      userManageList.length = 0;
      userManageList.push(...res.data);
      loading.value = false;
    })
    .catch((err: any) => {
      loading.value = false;
      VxeMessage('查询列表失败', VxeNotifyType.error);
    });
}

//新增
function handleAdd() {
  if (IsEmpty(invStoreManage.id)){
    VxeMessage('请选择仓库', VxeNotifyType.error);
  }

  const newRec :any = {
    storeId: invStoreManage.id,
    storeCode: invStoreManage.storeCode,
    userCode: '',
    userName: '',
    seq: 1
  } as any;

  userManageList.push(newRec);
}

//删除
function handleDelete() {
  const arr = transResultRef.value?.getCheckboxRecords(true);
  // const sltTemplates = (proxy.$refs.templateTableRef as any).getCheckboxRecords();
  if (!(arr && arr.length > 0 && arr[0])) {
    VxeMessage('请勾选要删除的数据', VxeNotifyType.info);
  } else {
    proxy
      .$confirm('确定要删除当前勾选的数据？', '提示', {
        cancelButtonClass: 'cancel-button',
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
      .then(() => {
        const url = '/inv/userManage/deleteUserManage';
        proxy.$http
          .post(url, arr)
          .then((res: any) => {
            VxeMessage(res.status.msg, VxeNotifyType.success);
            findUserManage();
          })
          .catch((err: any) => {
            VxeMessage(err, VxeNotifyType.error);
          });
      })
      .catch((err: any) => {
        VxeMessage(err, VxeNotifyType.error);
      });
  }
}
// 保存
function handleSave() {
  if (userManageList.length > 0) {
    const url = '/inv/userManage/saveOrUpdateUserManage';
    proxy.$http
      .post(url, userManageList)
      .then((res: any) => {
        VxeMessage('操作成功', VxeNotifyType.success);
        setTimeout(() => {
          findUserManage();
        }, 500);
      })
      .catch((err: any) => {
        VxeMessage('修改失败', VxeNotifyType.success);
      });
  } else {
    VxeMessage('无添加或修改数据', VxeNotifyType.error);
  }
}
</script>
<style lang="scss" scoped>
#transResult {
  height: 100%;

  // 附加按钮间距
  .button-blue,
  .button-red {
    margin: 5px 0 5px 5px;
  }

  // 最右侧质控靶值设定表格
  .tableBox {
    height: calc(100% - 45px);
  }
}
</style>
